import React, { Component } from 'react'
import { Text, View, TouchableOpacity } from 'react-native'
import Dialog, {
	DialogTitle,
	DialogContent,
	SlideAnimation,
	DialogFooter,
	DialogButton
} from 'react-native-popup-dialog'
import * as WeChat from 'react-native-wechat'
import { Actions } from 'react-native-router-flux'
import commonStyle from '../../libs/commonStyle'
import Iconfont from '../iconfont'

export default class ShareCom extends Component {
	constructor(props) {
		super(props)
		this.state = {
			slideAnimationDialog: false
		}
	}
	componentWillMount () {
		WeChat.addListener(
		    'SendMessageToWX.Resp',
		    (response) => {
		        if (parseInt(response.errCode) === 0) {
								// let params = this.paramsHandle(this.props.articleInfo)
								// 收集用户行为【从微信返回 module=3】
								// fetch('http://27.154.58.142:89/lua' + params)
		            // console.log('分享成功');
		        } else {
		            // console.log('分享失败');
		        }
		    }
		)
	}
	
	_onQrcode() {
		this.toggleDialog()
		Actions.qrcode()
	}
	// shareToSession【微信好友，群】    shareToTimeline 【朋友圈】
	_onShare(type) {
		if (!WeChat[type]) return
		let params = this.props.params || {}
		let articleInfo = this.props.articleInfo || {}
		WeChat.isWXAppInstalled().then(async isInstalled => {
			if (isInstalled) {
				let res = await WeChat[type](params)
// 				if (res.errCode === 0) {
// 					// alert('分享成功')
// 					// TODO 连接
// 					let params = this.paramsHandle(articleInfo)
// 					// 收集用户行为【从微信返回 module=3】
// 					fetch('http://27.154.58.142:89/lua' + params)
// 				}
			} else {
				alert('没有安装微信软件，请您安装微信之后再试')
			}
		})
	}
	paramsHandle (params) {
		const urlParArr = Object.keys(params)
		if (urlParArr.length) {
			urlParArr.forEach(element => {
				urlParStr += `${element}=${params[element]}&`
			})
			urlParStr = `?${urlParStr}`.slice(0, -1)
		}
		return urlParStr
	}
	toggleDialog() {
		let flag = this.state.slideAnimationDialog
		this.setState({
			slideAnimationDialog: !flag
		})
	}
	render() {
		return (
			<Dialog
				onDismiss={() => {
					this.setState({ slideAnimationDialog: false })
				}}
				onTouchOutside={() => {
					this.setState({ slideAnimationDialog: false })
				}}
				width={1}
				dialogStyle={{
					borderRadius: 0
				}}
				containerStyle={{
					justifyContent: 'flex-end'
				}}
				visible={this.state.slideAnimationDialog}
				dialogTitle={<DialogTitle title="请选择分享方式" />}
				dialogAnimation={new SlideAnimation({ slideFrom: 'bottom' })}
				footer={
					<DialogFooter>
						<DialogButton
							text="取消"
							bordered
							style={{
								backgroundColor: '#f5f5f5'
							}}
							onPress={() => {
								this.setState({ slideAnimationDialog: false })
							}}
							key="button-2"
						/>
					</DialogFooter>
				}
			>
				<DialogContent>
					<View
						style={[
							commonStyle.flexRow,
							commonStyle.flexCenter,
							commonStyle.pt50
						]}
					>
						<TouchableOpacity
							onPress={() => {
								this._onShare('shareToSession')
							}}
							style={[
								commonStyle.flexCenter,
								commonStyle.flexItem
							]}
						>
							<Iconfont
								name="weixin2"
								style={[
									commonStyle.weixinColor,
									commonStyle.f100
								]}
							/>
							<Text style={[commonStyle.pt10]}>微信</Text>
						</TouchableOpacity>
						<TouchableOpacity
							onPress={() => {
								this._onShare('shareToTimeline')
							}}
							style={[
								commonStyle.flexCenter,
								commonStyle.flexItem
							]}
						>
							<Iconfont
								name="pengyouquan"
								style={[
									commonStyle.weixinColor,
									commonStyle.f100
								]}
							/>
							<Text style={[commonStyle.pt10]}>朋友圈</Text>
						</TouchableOpacity>
						{this.props.qrcode && (
							<TouchableOpacity
								onPress={() => {
									this._onQrcode()
								}}
								style={[
									commonStyle.flexCenter,
									commonStyle.flexItem
								]}
							>
								<Iconfont
									name="ico"
									style={[
										commonStyle.activeColor,
										commonStyle.f100
									]}
								/>
								<Text style={[commonStyle.pt10]}>
									面对面扫码
								</Text>
							</TouchableOpacity>
						)}
					</View>
				</DialogContent>
			</Dialog>
		)
	}
}
